/* eslint-disable no-use-before-define */
import React, { useEffect, useState, useMemo } from "react";
import MainLayout from "@component/mainLayout/mainLayout";
import yhTools from "@/tools/yh";
import xhdConfig from "@/config/XHDConfig";
import Pay from "./components/pay";
import Loan from "./components/loan";
import { InterfaceG } from "@config/Config";
import FailLoanRepay from "./components/failLoanRepay";
import { Tabs, Toast } from "antd-mobile";
import decoratorToLoan from "@/component/decoratorToLoan";
import "./index.scss";
const tabs = [{ title: "借款记录" }, { title: "还款记录" }];
const urlMap = {
	0: "xhdRecordLoanList",
	1: "xhdRecordPayList",
	default: "xhdRecordLoanList"
};
const bannerType = {
	0: {
		pageType: "XHD_BORROW_REPAYMENT_RECORD_PAGE",
		type: ["XHD_BORROW_TAB_YES_RECORD_PAGE", "XHD_BORROW_TAB_NO_RECORD_PAGE"]
	},
	1: {
		pageType: "XHD_BORROW_REPAYMENT_RECORD_PAGE",
		type: [
			"XHD_REPAYMENT_TAB_YES_RECORD_PAGE",
			"XHD_REPAYMENT_TAB_NO_RECORD_PAGE"
		]
	}
};
const textObjRepay = {
	title: "暂无还款记录",
	message: "按时还款，积累点滴信用"
};
const textObjLoan = {
	title: "暂无借款记录",
	message: "体验借款，开启信用生活"
};
let currentKey = 0;
const LoanAndPayDetail = props => {
	// const [dataSource, setData] = useState([]);
	const [loanData, setLoanData] = useState([]);
	const [repayData, setRepayData] = useState([]);
	const [loanBanner, setLoanBanner] = useState([]);
	const [repayBanner, setRepayBanner] = useState([]);
	const [loanInfo, setLoanInfo] = useState({});

	const initialPage = useMemo(() => parseInt(props.match.params.type), []);
	useEffect(() => {
		currentKey = parseInt(props.match.params.type);
		getList(currentKey);
		xhdBorrowInitInfo();
	}, []);
	const headerParams = {
		header: {
			title: "借还记录"
		},
		history: props.history
	};
	const getList = currentKey => {
		const url = xhdConfig[urlMap[currentKey] || urlMap.default];
		const params = {
			url,
			params: {},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			if (res.code === "0") {
				if (currentKey == 0) {
					setLoanData(() => {
						getBannerListByPageType(res.data.length, currentKey);
						return res.data;
					});
				} else {
					setRepayData(() => {
						getBannerListByPageType(res.data.length, currentKey);
						return res.data;
					});
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	};

	//请求数据
	const onChange = (_, index) => {
		currentKey = index;
		getList(index);
	};
	//获取banner
	const getBannerListByPageType = async (dataLength, currentKey) => {
		const current = bannerType[currentKey];
		const pageType = current.pageType;
		const params = {
			url: InterfaceG.getBannerListByPageType,
			params: {
				pageType
			},
			_alertShow: false
		};
		try {
			const { code, data } = await yhTools.request(params);
			if (code == "0") {
				const types = current.type;
				let type = dataLength > 0 ? types[0] : types[1];
				if (Array.isArray(data)) {
					const item = data.find(item => item.bannerType === type);
					if (item) {
						if (Array.isArray(item.indexServerDtos)) {
							if (currentKey === 0) {
								setLoanBanner(item.indexServerDtos);
							} else {
								setRepayBanner(item.indexServerDtos);
							}
						}
					}
				}
			}
		} catch (error) {
			console.log(error);
		}
	};
	//去借款
	const toLoan = () => {
		props.toLoan(loanInfo);
	};
	//小辉贷初始化
	const xhdBorrowInitInfo = () => {
		let objs = {
			url: InterfaceG.xhdBorrowInitInfo,
			params: {},
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				const data = res.data || {};
				const availableAmount = data.availableAmount || 0;
				const duringtion = data.duringtion || [];
				const reminder = data.reminder;
				const loanBalanceAmt = data.loanBalanceAmt;
				setLoanInfo({
					availableAmount,
					duringtion,
					reminder,
					loanBalanceAmt
				});
			} else {
				Toast.info(res.message, 2);
			}
			Toast.hide();
		});
	};
	return (
		<MainLayout pageParams={headerParams}>
			<Tabs tabs={tabs} onChange={onChange} initialPage={initialPage}>
				<Loan banner={loanBanner} {...props} data={loanData}>
					<FailLoanRepay
						onClick={toLoan}
						textObj={textObjLoan}
						loanBalanceAmt={loanInfo.loanBalanceAmt}
					/>
				</Loan>
				<Pay {...props} data={repayData} banner={repayBanner}>
					<FailLoanRepay
						onClick={toLoan}
						textObj={textObjRepay}
						loanBalanceAmt={loanInfo.loanBalanceAmt}
					/>
				</Pay>
			</Tabs>
		</MainLayout>
	);
};
export default decoratorToLoan(LoanAndPayDetail);
